import './style.less'

import { FC, PropsWithChildren } from 'react'
import { CSSTransition, SwitchTransition } from 'react-transition-group'

interface Props extends PropsWithChildren {
  keyIndex: any
}

const PowerOn: FC<Props> = ({ children, keyIndex }) => {
  console.log(`fade key ${keyIndex}`)

  return (
    <SwitchTransition>
      <CSSTransition
        key={keyIndex}
        timeout={300}
        classNames="power"
        unmountOnExit
      >
        {() => <div className="power">{children}</div>}
      </CSSTransition>
    </SwitchTransition>
  )
}

export default PowerOn
